<template>
  <div class="e-wrap">
      <!-- 搜索条件 -->
      <div class="e-filter-options clearfix">
        <div class="e-filter">
          <div class="e-item">
            <span class="title">操作时间</span>
            <div class="date dis-block">
              <div>
                <w-date-picker language="ch" placeholder="起始时间" v-model="queryParams.startTime"></w-date-picker>
              </div>
              <span class="icon">—</span>
              <div>
                <w-date-picker language="ch" placeholder="结束时间" v-model="queryParams.endTime"></w-date-picker>
              </div>
            </div>
          </div>
        </div>
        <div class="e-btn" style="margin-top:5px;">
          <w-button @on-click='changePage(1)'>搜索</w-button>
        </div>
        <!-- <div class="e-item">
            <span class="title">IP</span>
            <div class="dis-block">
            <w-input :holder="`请填写`"></w-input>
            </div>
        </div>
        <div class="e-item">
            <span class="title">操作模块</span>
            <div class="dis-block">
              <w-select></w-select>
            </div>
        </div> -->
        <!-- 搜索按钮 -->
        <!-- <div class="filter-btn">
            <w-button>搜索</w-button>
        </div> -->
      </div>
      <!-- 角色列表 -->
      <div class="e-filter-list clearfix">
        <div class="e-add clearfix">
          <span>共计：{{logList.totalCount}}条</span>
        </div>
        <!-- 列表数据 -->
        <div v-if="logList.totalCount">
          <div class="e-list clearfix">
            <table>
              <tr class="table-h">
                <th>操作人</th>
                <th>IP</th>
                <th>操作时间</th>
                <th>操作类型</th>
                <th>操作模块</th>
                <th>操作内容</th>
                <th>操作</th>
              </tr>
              <tr v-for='(val, index) in logList.recordList' :key="index">
                <td>{{val.userName}}</td>
                <td>{{val.ip}}</td>
                <td>{{val.addTimeString}}</td>
                <td>{{val.type}}</td>
                <td :title="val.targetName">{{val.targetName}}</td>
                <td :title="val.content">{{val.content}}</td>
                <td>
                  <span class="cur" @click="cancelPanel = true; delParams.ids = [val.id]"> 删除 </span>
                </td>
              </tr>
            </table>
          </div>
          <!-- 分页 -->
          <div class="fr" style="margin-top: 35px">
            <w-paging :current="logList.currentPage" :total="logList.pageCount" @on-page='changePage'></w-paging>
          </div>  
        </div>
        
        <!-- 没有数据时 -->
        <div v-else style="text-align: center;line-height: 50px;">暂无数据</div>
      </div>

      <!-- 确认是否删除 -->
      <w-panel-fixed-wrap v-model="cancelPanel" :panel-title="true" title="提示" :width="`260px`" :height="`210px`" @on-confirm='submitDelete'>
        <div class="sure-cancel">
          是否确认删除该日志？
        </div>
      </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      cancelPanel: false,
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        startTime: '',
        endTime: '',
        currentPage: '1',
        showCount: '15'
      },
      logList: [],
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        ids: []
      }
    }
  },
  created() {
    this._getLogList()
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    _getLogList() {
      this.queryParams.accessToken = this.token
      apiSystemMange.queryLog(this.queryParams).then(data => {
        if (data.code != '200') return
        this.logList = data.data
      })
    },
    changePage(page) {
      this.queryParams.currentPage = page
      this._getLogList()
    },
    submitDelete() {
      this.delParams.accessToken = this.token
      apiSystemMange.delLog(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast('日志删除成功', () => {
          this.cancelPanel = false
          this.changePage(1)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-filter-options {
  border-bottom: 1px solid $border-gray-light;
  padding-bottom: 20px;
  .filter-btn {
    margin: 40px auto 20px;
    text-align: center;
  }
  .e-item {
    &:nth-of-type(1) {
      margin-left: 0;
    }
  }
  .date {
    width: 365px;
    vertical-align: middle;
    & > div {
      display: inline-block;
      width: 170px;
    }
  }
}
.e-list {
  table {
    th:nth-of-type(1) {
      width: 105px;
    }
    th:nth-of-type(2) {
      width: 120px;
    }
    th:nth-of-type(3) {
      width: 180px;
    }
    th:nth-of-type(6) {
      width: 390px;
    }
    th:nth-of-type(4), th:nth-of-type(7) {
      width: 85px;
    }
    td {
      padding: 0 10px;
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.btn {
  margin-left: 20px;
  top: -3px;
}
.e-filter-list {
  width: 100%;
  .e-add {
    margin: 20px 0;
    span {
      float: right;
      color: rgba(49, 49, 49, 1);
      line-height: 20px;
    }
  }
}
</style>